<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <!-- 引入通用头部 -->
    <div id="commonHeader"></div>

    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="container">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="home.html">首页</a>
                <i class="layui-icon layui-icon-right"></i>
                <span>购物车</span>
            </div>

            <!-- 主要内容区 -->
            <div class="cart-content">
                <!-- 购物车表格 -->
                <div class="cart-table-container">
                    <table class="cart-table">
                        <thead>
                            <tr>
                                <th width="5%">
                                    <input type="checkbox" id="selectAll" lay-skin="primary">
                                </th>
                                <th width="40%">商品信息</th>
                                <th width="10%">单价</th>
                                <th width="15%">数量</th>
                                <th width="15%">小计</th>
                                <th width="15%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="carList">
                            <!-- 购物车项目将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>

                <!-- 空购物车提示 -->
                <div class="empty-cart">
                    <div class="empty-cart-icon">
                        <i class="layui-icon layui-icon-cart-simple"></i>
                    </div>
                    <p class="empty-cart-text">购物车空空如也，去看看心仪的图书吧~</p>
                    <a href="./catalog.html" class="layui-btn layui-btn-normal go-shopping-btn">去选购</a>
                </div>

                <!-- 购物车底部 -->
                <div class="cart-footer">
                    <div class="cart-footer-left">
                        <input type="checkbox" id="selectAllBottom" lay-skin="primary">
                        <label for="selectAllBottom">全选</label>
                        <button class="layui-btn layui-btn-primary delete-selected">删除选中</button>
                        <button class="layui-btn layui-btn-primary clear-cart">清空购物车</button>
                    </div>
                    <div class="cart-footer-right">
                        <div class="cart-total">
                            已选择 <span class="selected-count">0</span> 件商品，合计：
                            <span class="total-price">￥0.00</span>
                        </div>
                        <button class="layui-btn layui-btn-danger checkout-btn" disabled>结算</button>
                    </div>
                </div>
            </div>

            <!-- 推荐图书 -->
            <div class="recommended-books">
                <h3 class="section-title">猜你喜欢</h3>
                <div class="book-list">
                    <!-- 推荐图书项目将通过JavaScript动态生成 -->
                    <div class="bookItem">
                        <div class="book-image">
                            <img src="" alt="">
                        </div>
                        <div class="book-info">
                            <h4 class="book-title"></h4>
                            <div class="book-meta">
                                <span class="book-condition"></span>
                                <span class="book-age"></span>
                            </div>
                            <div class="book-price"></div>
                        </div>
                    </div>
                    <!-- 重复上面的bookItem结构，共10个 -->
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                    <div class="bookItem"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div id="mask">
        <div class="maskContent loginBox">
            <div class="loginTitleBox">
                <div class="loginTitle">登录</div>
                <div class="loginClose" id="closeMask">
                    <i class="layui-icon layui-icon-close"></i>
                </div>
            </div>
            <div class="loginContent">
                <div class="loginInput">
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>
                <div class="loginInput">
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
                <div class="loginBtn">
                    <button class="loginBtn" id="loginSubmit">登录</button>
                </div>
                <div class="loginBtn">
                    <div>没有账号?</div>
                    <button class="loginBtn" id="toRegister">去注册</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/auth.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/cart.js"></script>
</body>
</html>